<template>
  <div>
    <a-button @click="showDrawer">上传文件</a-button>
    <a-drawer
      v-model:visible="visible"
      width="1000px"
      class="custom-class"
      style="color: #000"
      title="文件选择"
      placement="right"
      @after-visible-change="afterVisibleChange"
    >
      <div class="FromBoxSlt">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item
            class="FromIptS"
            label="文件名"
            v-bind="validateInfos.name"
          >
            <a-input v-model:value="modelRef.name" />
          </a-form-item>
          <a-form-item
            class="FromIptSt"
            label="文件类"
            v-bind="validateInfos['sub.name']"
          >
            <a-input v-model:value="modelRef.sub.name" />
          </a-form-item>
          <a-form-item class="IPBtn" :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click.prevent="onSubmit">搜索</a-button>
            <a-button style="margin-left: 10px" @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
   <OSSImgX></OSSImgX>
     
      
    </a-drawer>
  </div>
</template>

<script>
import OSSImgX from "../../views/OSSImgX/index.vue";
import { defineComponent, ref, reactive, toRaw } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const visible = ref(false);

    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showDrawer = () => {
      visible.value = true;
    };
    const modelRef = reactive({
      name: "",
      sub: {
        name: "",
      },
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      reactive({
        name: [
          {
            required: true,
            message: "Please input name",
          },
        ],
        "sub.name": [
          {
            required: true,
            message: "Please input sub name",
          },
        ],
      })
    );

    const onSubmit = () => {
      validate()
        .then((res) => {
          console.log(res, toRaw(modelRef));
        })
        .catch((err) => {
          console.log("error", err);
        });
    };

    const reset = () => {
      resetFields();
    };

    return {
      visible,
      afterVisibleChange,
      showDrawer,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      validateInfos,
      reset,
      modelRef,
      onSubmit,
    };
  },
  components: {
    OSSImgX,
  },
});
</script>

<style>
.FromBoxSlt {
  width: 100%;
  height: auto;
  background: #fdfbfb;
}
.FromIptS {
  width: 350px;
  float: left;
}
.FromIptSt {
  width: 330px;
  float: left;
}
.IPBtn {
  width: 250px;
 display: flex;
}
.uploadingFile {
  width: 100%;
  height: 400px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #f2f2f2;
}
</style>